<template>
  <div>
    <h2 align="center">用户还款</h2>
    <table class="table table-bordered">
      <tr>
        <td>借款名称</td>
        <td>
          {{ list.B_Name }}
        </td>
      </tr>

      <tr>
        <td>借款最高金额</td>
        <td>
          {{ list.B_MaxPrice }}
        </td>
      </tr>

      <tr>
        <td>借款年限</td>
        <td>
          {{ list.B_Year }}
        </td>
      </tr>

      <tr>
        <td>利息</td>
        <td>
          {{ list.I_Number }}
        </td>
      </tr>

      <tr>
        <td>借款金额</td>
        <td>
          {{ list.UB_Money }}
        </td>
      </tr>

      <tr>
        <td>还款金额</td>
        <td>
          <input type="text" v-model="TUB_Money">
        </td>
      </tr>

      <tr>
        <td></td>
        <td>
         <input type="button" value="确认还款" @click="MackBack" class="btn btn-primary">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import moment from 'moment';

import {reactive,toRefs,onMounted} from 'vue'

import axios from 'axios';

import {useRoute,useRouter} from 'vue-router'

//引入pinia
import {useUserStore} from '../../store/user'

let route = useRoute()
let router = useRouter()

let useStore = useUserStore()
//数据
let data:any = reactive({
  //反填数据
  list:[],
  TUB_Money:''
})

//解构
let {list,TUB_Money} = toRefs(data)

//生命周期函数
onMounted(()=>{
  BackInfo()
})

//反填
const BackInfo=()=>{
  axios({
    url:'/api/Borrow/UserBackInfo',
    method:'get',
    params:{
      B_Id:route.query.B_Id
    }
  }).then(res=>{
    console.log(res);
    list.value=res.data.data[0]
  }).catch(err=>{
    console.log(err);  
  })
}

//确认还款
const MackBack=()=>{
  if(TUB_Money.value>list.value.UB_Money){
    return alert('还款金额不能大于借款金额')
  }
  axios({
    url:'/api/Borrow/PostBackBorrow',
    method:'post',
    data:{
      TUB_Money:TUB_Money.value,
    }
  }).then(res=>{
    console.log(res);
    alert('还款成功')
    router.push('/userborrowList')
    // if(res.data.data>0){
    //   return alert('还款成功')
    // }else{
    //   return alert('还款失败')
    // }
  }).catch(err=>{
    console.log(err);
    
  })
}

</script>

<style scoped>

</style>